<template>
    <!-- 导航部分开始 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>主数据</el-breadcrumb-item>
        <el-breadcrumb-item>客户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 导航部分结束 -->

    <!--  搜索栏开始 -->
    <!-- //绑定queryClient[]数组 -->
    <el-form style="margin-top: 15px;" :inline="true" :model="queryClient" class="demo-form-inline">
        <el-form-item label="客户编码">
            <!-- //传入queryClient.clientName,queryClient.clientName -->
            <el-input v-model="queryClient.clientCode" placeholder="请输入客户编码" clearable />
        </el-form-item>
        <el-form-item label="客户名">
            <!-- //传入queryClient.clientName,queryClient.clientName -->
            <el-input v-model="queryClient.clientName" placeholder="请输入客户名称" clearable />
        </el-form-item>
        <el-form-item label="客户简称">
            <!-- //传入queryClient.clientName,queryClient.clientName -->
            <el-input v-model="queryClient.clientNick" placeholder="请输入客户简称" clearable />
        </el-form-item>
        <el-form-item label="客户英文名称">
            <!-- //传入queryClient.clientName,queryClient.clientName -->
            <el-input v-model="queryClient.clientEn" placeholder="请输入客户英文名称" clearable />
        </el-form-item>

        <el-form-item label="是否启用">
            <el-select v-model="queryClient.enableFlag" placeholder="是否启用">
                <el-option label="是" value="Y" />
                <el-option label="否" value="N" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="loadClients"><el-icon>
                    <Search />
                </el-icon>搜索</el-button>
            <el-button @click="cleanClients"><el-icon>
                    <Refresh />
                </el-icon>重置</el-button>
        </el-form-item>
    </el-form>
    <!--  搜索栏结束 -->


    <!-- 工具栏开始 -->
    <div class="flex" style="margin-top: 10px;">
        <el-button title="新增客户" @click="this.addClientDialogVisible = true" type="primary">
            <el-icon>
                <Plus />
            </el-icon>
            新增
        </el-button>
        <el-button title="修改选中客户" @click="handlerEdits" type="success">
            <el-icon>
                <EditPen />
            </el-icon>
            修改
        </el-button>
        <el-button title="删除选中客户" @click="deleteClients" type="danger"><el-icon>
                <Delete />
            </el-icon>
            删除
        </el-button>
        <el-button title="导出选中客户" @click="printClients" type=""><el-icon>
                <Download />
            </el-icon>
            导出
        </el-button>
    </div>
    <!-- 工具栏结束 -->

    <!-- 添加客户的弹窗窗体开始-->
    <el-dialog v-model="addClientDialogVisible" title="添加客户" width="1000" align-center>
        <!-- 添加客户的表单 -->
        <el-form label-width="100px" :model="newClient" style="max-width: 900px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="客户编码">
                        <el-input v-model="newClient.clientCode" />
                    </el-form-item>
                </el-col>
                <el-form-item label="自动编码">
                    <el-switch v-model="newClient.clientCode" />
                </el-form-item>
                <el-col :span="8">
                    <el-form-item label="客户名称">
                        <el-input v-model="newClient.clientName" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户简称">
                        <el-input v-model="newClient.clientNick" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户英文名称">
                        <el-input v-model="newClient.clientEn" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户类型">
                        <el-select v-model="newClient.clientType" placeholder="选择客户类型">
                            <el-option label="企业客户" value="企业客户" />
                            <el-option label="个人" value="个人" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-form-item label="客户简介">
                <el-input v-model="newClient.clientDes" type="textarea" />
            </el-form-item>
            <el-form-item label="客户地址">
                <el-input v-model="newClient.address" type="textarea" />
            </el-form-item>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="客户官网地址">
                        <el-input v-model="newClient.website" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户邮箱地址">
                        <el-input v-model="newClient.email" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户电话">
                        <el-input v-model="newClient.tel" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户LOGO">
                        <el-input v-model="newClient.clientLogo" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人1">
                        <el-input v-model="newClient.contact1" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人1-电话">
                        <el-input v-model="newClient.contact1Tel" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人1-邮箱">
                        <el-input v-model="newClient.contact1Email" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人2">
                        <el-input v-model="newClient.contact2" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人2-电话">
                        <el-input v-model="newClient.contact2Tel" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人2-邮箱">
                        <el-input v-model="newClient.contact2Email" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="社会信用代码">
                        <el-input v-model="newClient.creditCode" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否有效">
                        <el-radio-group v-model="newClient.enableFlag">
                            <el-radio label="是" :value="Y" />
                            <el-radio label="否" :value="N" />
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>



            <el-form-item label="备注">
                <el-input v-model="newClient.remark" type="textarea" />
            </el-form-item>


        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelAddClient">取消</el-button>
                <el-button type="primary" @click="doAddClient">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加客户的弹窗窗体结束-->

    <!-- 修改客户的弹窗窗体开始-->
    <el-dialog v-model="clientEditDrawer" title="添加客户" width="1000" align-center>
        <!-- 添加客户的表单 -->
        <el-form label-width="100px" :model="editClient" style="max-width: 900px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="客户编码">
                        <el-input v-model="editClient.clientCode" />
                    </el-form-item>
                </el-col>
                <el-form-item label="自动编码">
                    <el-switch v-model="editClient.clientCode" />
                </el-form-item>
                <el-col :span="8">
                    <el-form-item label="客户名称">
                        <el-input v-model="editClient.clientName" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户简称">
                        <el-input v-model="editClient.clientNick" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户英文名称">
                        <el-input v-model="editClient.clientEn" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户类型">
                        <el-select v-model="editClient.clientType" placeholder="选择客户类型">
                            <el-option label="企业客户" value="企业客户" />
                            <el-option label="个人" value="个人" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-form-item label="客户简介">
                <el-input v-model="editClient.clientDes" type="textarea" />
            </el-form-item>
            <el-form-item label="客户地址">
                <el-input v-model="editClient.address" type="textarea" />
            </el-form-item>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="客户官网地址">
                        <el-input v-model="editClient.website" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户邮箱地址">
                        <el-input v-model="editClient.email" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户电话">
                        <el-input v-model="editClient.tel" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户LOGO">
                        <el-input v-model="editClient.clientLogo" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人1">
                        <el-input v-model="editClient.contact1" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人1-电话">
                        <el-input v-model="editClient.contact1Tel" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人1-邮箱">
                        <el-input v-model="editClient.contact1Email" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人2">
                        <el-input v-model="editClient.contact2" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人2-电话">
                        <el-input v-model="editClient.contact2Tel" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人2-邮箱">
                        <el-input v-model="editClient.contact2Email" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="社会信用代码">
                        <el-input v-model="editClient.creditCode" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否有效">
                        <el-radio-group v-model="editClient.enableFlag">
                            <el-radio label="Y" :value="Y">是</el-radio>
                            <el-radio label="N" :value="N">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>



            <el-form-item label="备注">
                <el-input v-model="editClient.remark" type="textarea" />
            </el-form-item>


        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelAddClient">取消</el-button>
                <el-button type="primary" @click="doClientEdit">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 修改客户的弹窗窗体结束-->



    <!-- 表格 开始 -->
    <el-table ref="clientTable" :data="clients" max-height="800px" stripe="true" border="true"
        style="width: 100%;margin-top: 10px;">
        <el-table-column type="selection" width="55" />
        <el-table-column label="客户编码" property="clientCode" />
        <el-table-column label="客户名称" property="clientName" />
        <el-table-column label="客户简称" property="clientNick" />
        <el-table-column label="客户类型" property="clientType" />
        <el-table-column label="客户电话" property="tel" />
        <el-table-column label="联系人" property="contact1" />
        <el-table-column label="联系人-电话" property="contact1Tel" />
        <el-table-column label="是否启用" property="enableFlag">
            <template #default="scope">
                <!-- scope.row 就是整行数据-->
                <el-tag v-if="scope.row.enableFlag == 'Y'" class="ml-2" type="success">是</el-tag>
                <el-tag v-else class="ml-2" type="danger">否</el-tag>
            </template>
        </el-table-column>

        <el-table-column width="200px" align="center" label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">
                    <el-icon>
                        <EditPen />
                    </el-icon>编辑
                </el-button>
                <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
                    title="您是否要删除这行数据">
                    <template #reference>
                        <el-button size="small" type="danger"><el-icon>
                                <Delete />
                            </el-icon>删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <!-- 表格 结束 -->
    <!-- 分页栏开始 -->
    <el-pagination style="margin-top: 15px;" :page-size="limit" :pager-count="10" @current-change="changePage" background
        layout="prev, pager, next" :total="total" />
    <!-- 分页栏结束 -->

    <el-text class="mx-1" style=" margin-top: 30px; ">
        记录问题: 随机生成功能未实现 ; 表单校验功能未实现


    </el-text>
</template>
<script>
import clientRequest from '../../../aip/md/client-api.js';

export default {
    data() {
        return {
            clients: [],
            // 查询参数
            page: 1,
            limit: 10,
            queryClient: { enableFlag: '' },
            total: 0,
            maxPageNum: 1,
            newClient: {}, // 新添加的客户对象

            addClientDialogVisible: false,// 弹窗的属性
            clientEditDrawer: false, // 标记编辑客户的窗体是否显示
            direction: 'rtl',// 抽屉的方向
            editClient: {}, // 当前正在编辑的客户对象 
        };
    },
    methods: {
        // 加载客户
        loadClients() {

            console.log(this.queryClient);
            //axios调用
            clientRequest.list(this.page, this.limit, this.queryClient, data => {
                console.log(data); // 这里的data就是我们的PerRequest对象
                // 取出分页的数据
                let pager = data.data;
                this.clients = pager.data;//改
                this.total = pager.total;
                this.maxPageNum = pager.maxPageNum;
            });


        },

        /**
         * 分页栏的按钮事件
         * @param {} currPage  最新的页码
         */
        changePage(currPage) {
            this.page = currPage;
            this.loadClients();
        }
        ,
        // 重置清空
        cleanClients() {
            this.queryClient = '';
        },

        /**回调函数后,将后端数据传给前端
         * 添加客户的提交按钮事件
         */
        doAddClient() {

            // 客户数据 this.newClient
            clientRequest.saveClient(this.newClient, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '添加客户成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.addClientDialogVisible = false;
                    // 重新加载数据
                    this.loadClients();
                    // 将newClient制空
                    this.newClient = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '客户名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error',
                    });
                }
            });
        },


        /**
* 行编辑按钮事件
* @param {*} row 整行数据 
*/
        handleEdit(row) {
            // 显示抽屉弹窗
            console.log(this.editClient.enableFlag);
            // 通过id加载要编辑的客户信息
            clientRequest.get(row.clientId, res => {
                this.editClient = res.data;
                console.log(this.editClient.enableFlag);
                // 显示抽屉弹窗
                this.clientEditDrawer = true;
            });
        },
        /**
            * 客户编辑提交按钮事件
            */
        doClientEdit() {
            // 提交editClient即可
            clientRequest.edit(this.editClient, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '编辑客户成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.clientEditDrawer = false;
                    // 重新加载数据
                    this.loadClients();
                    // 将editClient制空
                    this.editClient = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '客户名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },

        /**
 * 批量编辑按钮事件
 */
        handlerEdits() {
            // 获取表格对象
            let table = this.$refs.clientTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            }
            // 获取第一行数据
            let row = selectionRows[0];
            // 调用行编辑事件
            this.handleEdit(row);
        },

        /**
* 行编辑按钮事件
* @param {*} row 整行数据
*/
        handleDelete(row) {
            clientRequest.delete(row.clientId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadClients();
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },
        /**
        * 批量删除角色的工具按钮事件
        */
        deleteClients() {
            // 获取表格对象
            let table = this.$refs.clientTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            }
            // 生成一个要删除的clientId的数组
            let clientIds = [];
            //遍历添加到要删除的数组push
            selectionRows.forEach(client => {
                clientIds.push(client.clientId);
            });

            // 调用API进行删除
            clientRequest.deleteSelect(clientIds, res => {
                this.$message({
                    type: "success",
                    message: "成功的删除了" + res.msg + "条数据"
                });
                this.loadClients();
            });
        },


    },
    mounted() {
        this.loadClients();
    }

}
</script>

<style scoped></style>